<template>
  <div class="list">
    <ul>
      <li v-for="(item, index) in listData" :key="index"  @click="handleClick(item)">
        <van-icon class="list-icon" color="#4095e5" :name="item.icon" />
        <span>{{ item.name }}</span>
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  data() {
    return {
      listData: [
        { name: "创建订单", status: "0", icon: "add", id: "00001", path: "/work/createOrder" },
        { name: "催缴欠费", status: "1", icon: "notes", id: "00002",path:'/address' },
        { name: "签到打卡", status: "0", icon: "map-marked", id: "00003",path:'/pointClock' },
        { name: "我的工单", status: "1", icon: "bars", id: "00004",path:'/workOrder' }
      ]
    };
  },
  methods: {
	handleClick(item) {
		if (item.path) {
		  this.$router.push(item.path); // 跳转到指定路径
		}else{
      this.$toast('暂未开放')
    }
	}
  }
};

</script>
<style lang="less" scoped>
.list {
  height: 80px;
  width: 100%;
  background-color: white;
  border-radius: 8px;
}
ul {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  height: 100%;
  padding: 10px;
  li {
    list-style: none;
    width: 20%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
    padding: 10px 0px 0px 0px;
    .list-icon {
      font-size: 24px;
      position: relative;
      z-index: 1;
      margin: 0px 0px 10px 0px;
      &::after {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%); /* 居中定位 */
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background-color: #e0e2e9c1;
        z-index: -1; 
      }
    }
    span {
      font-size: 12px;
      color: #333;
    }
  }
}
</style>
